// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.forum-cover-edit {
  .default-box-shadow();
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 5px;
  max-width: 80vh; // hopefully aligns correctly
  width: 350px;
  border-radius: @border-radius-large;
  background-color: @osu-colour-b2;
  font-size: @font-size--normal;
  z-index: @z-index--simple-menu;
  text-align: center;

  &__buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  &__cover {
    .at2x-simple("~@images/headers/forum-topic-covers/forum-cover-category-osu.jpg");
    width: 100%;
    border-radius: @border-radius-large;
    height: 0;
    padding-bottom: (100% * 290 / 1200);
    background-size: cover;
  }

  &__info {
    padding: 0 20px 15px;
    margin: 0;
  }

  &__overlay {
    position: absolute;
    border-radius: @border-radius-large;
    background-color: hsla(var(--hsl-b6), 0.5);
    .center-content();
    .full-size();
    transition: all 120ms;

    &[data-state="hidden"] {
      opacity: 0;
      pointer-events: none;
    }

    &[data-state="hover"] {
      background-color: hsla(var(--hsl-b6), 0.8);
    }
  }
}
